// https://github.com/glennreyes/react-countup#classname-string
import React, {Component} from 'react'
import './index.css'
import CountUp from 'react-countup'
class CountUpDom extends Component {
  constructor(Props) {
    super(Props)
    this.state={
      end:100
    }
  }

  onStart=()=>{
    console.log('动画完成前')
  }
  start=()=>{
    console.log(this.countup)
    // if(this.countup){
      // this.countup.restart()
      this.setState({
        end: 1000
      })
    // }
  }
  onComplete=()=>{
    console.log('动画完成后')
  }
  render(){
    console.log(this.state.end,'kkkk')
    return (
      <div>
        {/* <CountUp end={this.state.end}></CountUp> */}
        <CountUp
          start={0}
          end={this.state.end}
          duration={2.75}
          separator=""
          decimals={2}
          delay={0}
          decimal="."
          prefix="EUR "
          suffix=" left"
          onEnd={() => console.log('Ended! 👏')}
          onStart={() => console.log('Started! 💨')}
        >
          {({ countUpRef, start }) => (
            <div>
              <span className="fanpq" ref={countUpRef} />
              <button onClick={start}>Start</button>
            </div>
          )}
        </CountUp>
        {/* <CountUp 
          ref={el=>this.countup=el}
          className="custom-count"
          start={0}
          end={this.start.end}
          duration={2}
          redraw={true}  //如果为true，则组件将始终在每次重新渲染时进行动画处理。
          separator=""  //制定千分位的分隔符
          decimal=","  //制定小数字符
          prefix="EUR "  //动画值前缀 
          suffix=" left"  //动画值后缀，可以加单位
          onComplete={this.onComplete} //动画完成后调用的函数
          onStart={this.onStart} //在动画开始前调用的函数
        /> */}
        <button onClick={this.start}>修改end</button>
      </div>
    )
  }
}
export default CountUpDom


